<template>
  <div class="app-container">
    <div id="data">
      <el-row type="flex" align="middle">
        <el-col :span="3">
          <h3>用例执行日期分布表</h3>
        </el-col>
        <el-col :span="7">
          <el-date-picker
            v-model="tiem"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="截至日期"
          >
          </el-date-picker>
        </el-col>

        <el-select
          v-model="execP"
          filterable
          clearable
          placeholder="请选择执行人"
        >
          <el-option
            :clearable="true"
            v-for="(item, i) in optionsExecP"
            :key="item.name + i"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>

        <el-select
          v-model="valueIt"
          filterable
          clearable
          placeholder="请选择用例类型"
        >
          <el-option
            :clearable="true"
            v-for="item in optionsIt"
            :key="item.type"
            :label="item.type"
            :value="item.type"
          >
          </el-option>
        </el-select>

        <el-button type="primary" size="medium" @click="executeDateShow()"
          >搜索</el-button
        >

        <el-button type="primary" size="medium" @click="resetting()"
          >重置</el-button
        >
      </el-row>
      <el-table ref="el_table_time" height="800" :data="list" border>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <!-- 时间段 :fixed="v.fixed"-->
        <template v-for="(v, i) in head">
          <el-table-column
            :key="v.prop + '' + i"
            :prop="v.prop + ''"
            :fixed="v.fixed"
            :label="v.label + ''"
            width="90"
            v-if="v.label != '总数'"
          >
          </el-table-column>
          <el-table-column
            :key="i + '' + v.prop"
            :prop="v.prop + ''"
            :label="v.label + ''"
            width="90"
            :fixed="v.fixed"
            sortable
            v-else
          >
          </el-table-column>
        </template>
        <el-table-column
          label="用例执行日期总数"
          prop="total"
          width="150"
        ></el-table-column>
      </el-table>

      <el-row type="flex" align="middle">
        <el-col :span="3">
          <h3>用例执行时间段分布表</h3>
        </el-col>
        <el-col :span="7">
          <el-date-picker
            v-model="tiem2"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="截至日期"
          >
          </el-date-picker>
        </el-col>

        <el-select
          v-model="execP2"
          filterable
          clearable
          placeholder="请选择执行人"
        >
          <el-option
            :clearable="true"
            v-for="(item, i) in optionsExecP"
            :key="i + item.name + i"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>

        <el-select
          v-model="valueIt2"
          filterable
          clearable
          placeholder="请选择用例类型"
        >
          <el-option
            :clearable="true"
            v-for="(item, i) in optionsIt"
            :key="i + item.type"
            :label="item.type"
            :value="item.type"
          >
          </el-option>
        </el-select>

        <el-button type="primary" size="medium" @click="executeTimeSlotShow()"
          >搜索</el-button
        >
        <el-button type="primary" size="medium" @click="resetting2()"
          >重置</el-button
        >
      </el-row>
      <el-table height="800" :data="list2" border>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <template v-for="(v, i) in head2">
          <el-table-column
            :key="v.prop + '' + i"
            :prop="v.prop + ''"
            :label="v.label + ''"
            :fixed="v.fixed"
            width="120"
            v-if="v.label != '总数'"
          >
          </el-table-column>
          <el-table-column
            :key="i + '' + v.prop"
            :prop="v.prop + ''"
            :label="v.label + ''"
            width="120"
            :fixed="v.fixed"
            sortable
            v-else
          >
          </el-table-column>
        </template>

        <el-table-column
          label="用例执行时间段总数"
          prop="total"
          width="150"
        ></el-table-column>
        <!-- <el-table-column v-for="" prop="closer" label="Bug关闭人" width="120">
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import * as exec from "@/api/exec";
export default {
  data() {
    return {
      tiem: [],
      tiem2: [],
      list: [],
      head: [],
      head2: [],
      list2: [],
      optionsIt: [],
      valueIt: "",
      valueIt2: "",
      optionsExecP: [],
      execP: "",
      execP2: "",
    };
  },
  methods: {
    resetting() {
      this.tiem = [];
    },
    resetting2() {
      this.tiem2 = [];
    },
    executeDateShow() {
      let h = [];

      h.push(
        {
          prop: "executor",
          label: "执行人",
          fixed: "fixed",
        },
        {
          prop: "total",
          label: "总数",
          fixed: "fixed",
        }
      );

      for (let i = 1; i < 32; i++) {
        h.push({
          prop: i,
          label: i,
        });
      }

      this.head = h;

      let params = {
        date_execute_start: this.tiem[0] || "",
        date_execute_end: this.tiem[1] || "",
        // case_type: this.valueIt,
        executor_name: this.execP,
      };
      exec.executeDateShow(params).then((res) => {
        let arr = [];
        for (let v of res.data.execute_detail_list) {
          let d = {
            executor: v.executor,
            total: v.total,
          };
          for (let dd of v.data_distribute) {
            d[dd.date] = dd.num;
          }
          arr.push(d);
        }
        this.list = arr;
        this.$refs.el_table_time.doLayout();
      });
    },
    executeTimeSlotShow() {
      let h = [];

      h.push(
        {
          prop: "executor",
          label: "执行人",
          fixed: "fixed",
        },
        {
          prop: "total",
          label: "总数",
          fixed: "fixed",
        }
      );

      let params = {
        date_execute_start: this.tiem2[0] || "",
        date_execute_end: this.tiem2[1] || "",
        case_type: this.valueIt2,
        executor_name: this.execP2,
      };
      exec.executeTimeSlotShow(params).then((res) => {
        let arr = [];
        for (let v of res.data.execute_detail_list) {
          let d = {
            executor: v.executor,
            total: v.total,
          };
          for (let dd of v.data_distribute) {
            d[dd.timeSlot] = dd.num;
          }
          arr.push(d);
        }
        let v = res.data.execute_detail_list[0].data_distribute;
        for (let i = 0; i < v.length; i++) {
          h.push({
            prop: v[i].timeSlot,
            label: v[i].timeSlot,
          });
        }
        this.head2 = h;

        this.list2 = arr;
      });
    },
  },
  created() {
    exec.caseTypeList().then((res) => {
      this.optionsIt = res.data.type_names;
    });

    setTimeout(() => {
      exec.executorList().then((res) => {
        this.optionsExecP = res.data.executor_names;
      });
    }, 500);

    setTimeout(() => {
      this.executeDateShow();
    }, 600);

    setTimeout(() => {
      this.executeTimeSlotShow();
    }, 3000);
  },
};
</script>

<style scoped>
#sjlx span {
  margin-right: 30px;
}

#sx {
  margin-top: 20px;
}
#sx .el-row {
  margin: 20px 0;
}

#data {
  margin: 20px 20px;
}
</style>
